Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
    <main>
        <div class="view view--1">
            <div>
                <h1>Epsilon</h1>
                <p>Epsilon is the fifth planet orbiting in the habitable zone of star Zeta1 Reticuli in the Zeta Reticuli System. It possesses rings, similar to the planet Saturn. these rings are theorized to be the remains of a destroyed moon that was broken apart by the gravitational shift forced by asteroid Indus when it was captured by the gravity of Epsilon 50 million years ago. Its most notable features are its three large moons, including Epirus, which is home to a very aggressive carnivore designated Xeno Rex.</p>
                <button class="unbutton button button--open" aria-label="Open other view">Next Page</button>
            </div>
        </div>
        <div class="view view--2">
            <h1 style="color: #ee3d3d;">Hypnos</h1>
            
            <p style="color: #cecece;">Hypnos is the fifth planet orbiting star Delta Pavonis in the Delta Pavonis system. Hypnos has a thin atmosphere mainly composed of nitrogen and ammonia. The planet has one moon which is rich with rare metals and minerals such as unobtanium and is being mined since 2306. Hypnos was discovered in 2040 by Copernicus Space Telescope.</p>
            <button class="unbutton button button--close" aria-label="Close current view">Previous Page</button>
        </div>
        <svg class="overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path class="overlay__path" vector-effect="non-scaling-stroke" d="M 0 0 h 0 c 0 50 0 50 0 100 H 0 V 0 Z" />
        </svg>
    </main>
</div>

</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    font-size: 15px;
}

html,
body {
    margin: 0;
    padding: 0;
    --color-text: #000;
    --color-bg-view-1: #9da0dd;
    --color-bg-view-2: #6a6468;
    --color-link: #000;
    --color-link-hover: #000;
    --color-button: #000;
    --color-button-hover: #22267d;
    color: var(--color-text);
    background-color: var(--color-bg-view-1);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
}

.wrapper {
    overflow-y: auto;
    height: 100vh;
}

a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
}

a:hover {
    color: var(--color-link-hover);
    outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
    outline: none;
    background: lightgrey;
}

a:focus:not(:focus-visible) {
    background: transparent;
}

a:focus-visible {
    outline: 2px solid #fff;
    background: transparent;
}

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.unbutton:focus {
    outline: none;
}

main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100vh;
  @media(max-width: 576px) {
    grid-auto-rows: min-content;
    grid-template-rows: auto;
  }
}

.button {
    color: var(--color-button);
    border-radius: 30px;
    min-width: 150px;
    padding: 1rem 2rem;
    border: 1px solid currentColor;
}

.button:hover,
.button:focus-visible {
    color: var(--color-button-hover);
}

.frame--view-open .button-open {
    opacity: 0;
    pointer-events: none;
}

.view {
    position: relative;
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    place-items: center;
}

.view--1 {
    display: flex;
    justify-content: space-around;
}

.view--1 p {
    text-align: left;
    margin-bottom: 30px;
}

.view--2 {
    background: var(--color-bg-view-2);
    pointer-events: none;
    opacity: 0;
}

.view.view--open {
    pointer-events: auto;
    opacity: 1;
}

.overlay {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    z-index: 1000;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

h1 {
    font-family: "Bowlby One SC", sans-serif;
    font-weight: 400;
    font-size: 80px;
    margin-bottom: 0;
    position: relative;
}

p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
  @media(max-width:576px) {
    max-width: 300px;
  }
}

img {
    position: absolute;
    max-width: 100%;
    height: 200px;
    top: 0;
    z-index: -1;
    right: 500px;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}

console.log("Event Fired")
// overlay (SVG path element)
const overlayPath = document.querySelector('.overlay__path');

// paths
// edit here: https://yqnn.github.io/svg-path-editor/
const paths = {
    step1: {
        unfilled: 'M 0 0 h 0 c 0 50 0 50 0 100 H 0 V 0 Z',
        inBetween: 'M 0 0 h 43 c -60 55 140 65 0 100 H 0 V 0 Z',
        /*
        M 0 0 h 34 c 73 7 73 94 0 100 H 0 V 0 Z
        M 0 0 h 33 c -30 54 113 65 0 100 H 0 V 0 Z
        M 0 0 h 34 c 112 44 -32 49 0 100 H 0 V 0 Z
        */
        filled: 'M 0 0 h 100 c 0 50 0 50 0 100 H 0 V 0 Z',
    },
    step2: {
        filled: 'M 100 0 H 0 c 0 50 0 50 0 100 h 100 V 50 Z',
        //inBetween: 'M 100 0 H 50 c 20 33 20 67 0 100 h 50 V 0 Z',
        inBetween: 'M 100 0 H 50 c 28 43 4 81 0 100 h 50 V 0 Z',
        unfilled: 'M 100 0 H 100 c 0 50 0 50 0 100 h 0 V 0 Z',
    }
};

// landing page/content element 
const landingEl = document.querySelector('.view--2');

// transition trigger button
const switchCtrl = document.querySelector('button.button--open');

// back button
const backCtrl = landingEl.querySelector('.button--close');

let isAnimating = false;

let page = 1;

const pageSwitchTimeline = gsap.timeline({
            paused: true,
            onComplete: () => isAnimating = false
        })
        .set(overlayPath, {
            attr: { d: paths.step1.unfilled }
        })
        .to(overlayPath, { 
            duration: 0.8,
            ease: 'power3.in',
            attr: { d: paths.step1.inBetween }
        }, 0)
        .to(overlayPath, { 
            duration: 0.2,
            ease: 'power1',
            attr: { d: paths.step1.filled },
            onComplete: () => switchPages()
        })

.set(overlayPath, { 
            attr: { d: paths.step2.filled }
        })

.to(overlayPath, { 
            duration: 0.15,
            ease: 'sine.in',
            attr: { d: paths.step2.inBetween }
        })
        .to(overlayPath, { 
            duration: 1,
            ease: 'power4',
            attr: { d: paths.step2.unfilled }
        });

const switchPages = () => {
    if ( page === 2 ) {
        landingEl.classList.add('view--open');
    }
    else {
        landingEl.classList.remove('view--open');
    }
}

// reveals the second content view
const reveal = ()  => {
    
    if ( isAnimating ) return;
    isAnimating = true;

page = 2;
    
    pageSwitchTimeline.play(0);
}

// back to first content view
const unreveal = ()  => {
    
    if ( isAnimating ) return;
    isAnimating = true;

page = 1;
    
    pageSwitchTimeline.play(0);
}

// click on menu button
switchCtrl.addEventListener('click', reveal);
// click on close menu button
backCtrl.addEventListener('click', unreveal);

Frontend Forever App